<template>
	<view>
		<cu-custom bgColor="bg-informatic-brown" isBack>
			<block slot="backText">返回</block>
			<block slot="content">团队详情</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white solids-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-green">团队基础信息</text>
					<text class="bg-green"></text>
				</view>
			</view>
			<form>
				<view class="cu-form-group">
					<view class="title">团队名称</view>
					<input placeholder="待获取" disabled v-model="team.Name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">创建日期</view>
					<input placeholder="待获取" disabled v-model="team.CreatedOn"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">队长姓名</view>
					<input placeholder="待获取" disabled v-model="team.LeaderName"></input>
				</view>
			</form>
			<view class="cu-bar bg-white solids-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-green">指导老师信息</text>
					<text class="bg-green"></text>
				</view>
				<view class="action">
					<button class="cu-btn bg-red light" @click="delTeacher" v-if="team.Role === '负责人'">删除指导老师</button>
				</view>
			</view>
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input placeholder="没有指导老师" disabled v-model="team.TurtorName"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">学院</view>
					<input placeholder="没有指导老师" disabled v-model="team.TurtorDepart"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">邮箱</view>
					<input placeholder="没有指导老师" disabled v-model="team.TurtorEmail"></input>
				</view>
			</form>
			<view class="cu-bar bg-white solids-bottom">
				<view class="action sub-title">
					<text class="text-xl text-bold text-green">团队成员信息</text>
					<text class="bg-green"></text>
					<!-- last-child选择器-->
				</view>
				<view class="margin-right">
					<button class="cu-btn bg-gradual-green" @click="toInvite">邀请他人加入</button>
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item arrow" v-for="(member, index) in members" @click="showMember(index)" :key="index">
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">{{member.RealName}}</text>
					</view>
					<view class="action">
						<view class='cu-tag round'>{{member.Role}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top padding flex flex-direction">
			<button v-show="team.Role === '负责人'" class="cu-btn bg-red lg" @click="delTeam(team.ID)">删除该团队</button>
		</view>
		<view class="cu-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-between" style="flex-direction: row-reverse">
					<view class="content">{{member.RealName}}的信息</view>
					<view class="action" @tap="showMember()">
						<text class="cuIcon-close text-red"></text>
					</view>
					<view class="action" @tap="removeMember(member)" v-show="team.Role === '负责人'">
						<text class="cuIcon-delete text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left">
					<form>
						<view class="cu-form-group">
							<view class="title">姓名</view>
							<input disabled placeholder="三字标题" v-model="member.RealName"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">学号</view>
							<input disabled placeholder="三字标题" v-model="member.Code"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">系别</view>
							<input disabled placeholder="三字标题" v-model="member.BelongDepart"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">电话</view>
							<input disabled placeholder="三字标题" v-model="member.Mobile"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">邮箱</view>
							<input disabled placeholder="三字标题" v-model="member.Email"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">加入时间</view>
							<input disabled placeholder="三字标题" v-model="member.CreatedOn"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">角色</view>
							<input disabled placeholder="三字标题" v-model="member.Role"></input>
						</view>
						<view class="padding flex flex-direction">
							<button class="cu-btn bg-blue light lg" @click="showMember()">确认</button>
						</view>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(opt) {
			this.getTeam(opt.id);
		},
		data() {
			return {
				team: {},
				members: [],
				member: {},
				showModal: false,
				maxMember: 5 //常量
			}
		},
		methods: {
			showMember(index) {
				if(typeof(index) === 'number') this.member = this.members[index];
				this.showModal = !this.showModal;
			},
			getTeam(ID) {
				uni.post("/api/team/GetTeam", {ID}, msg => {
					if(msg.success) {
						this.team = msg.data;
						this.getMembers(this.team.ID);
					} else {
						uni.showToast({
							icon: 'none',
							title: msg.msg
						})
					}
				})
			},
			toInvite() {
				if(this.members.length >= this.maxMember){
					// 成员数量超限
				}
				uni.navigateTo({
					url: './invite?id=' + this.team.ID
				})
			},
			getMembers(teamId) {
				uni.post("/api/team/GetTeamMembers", {teamId}, msg => {
					if(msg.success) {
						this.members = msg.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: msg.msg
						})
					}
				}) 
			},
			removeMember(member) {
				uni.post("/api/team/RemoveMember", {teamId: this.team.ID, memberId: member.ID}, msg => {
					if(msg.success) {
						this.showMember();
						this.getMembers(this.team.ID);
						uni.showToast({
							title: "删除成功"
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: msg.msg
						})
					}
				})
			},
			delTeacher() {
				uni.showModal({
					title: "确认删除",
					content: "是否删除此指导老师？删除后不可恢复。",
					success: (res) => {
						if(res.confirm){
							uni.post("/api/team/RemoveTurtor", {teamId: this.team.ID, tutorId: this.team.TurtorId}, msg => {
								if(msg.success) {
									uni.showToast({
										title: "删除成功"
									})
									this.getTeam(this.team.ID);
								} else {
									uni.showToast({
										icon: 'none',
										title: msg.msg
									})
								}
							})
						}
					}
				})
			},
			delTeam(ID) {
				uni.showModal({
					title: "确认删除",
					content: "是否删除此团队？删除后不可恢复。",
					success: (res) => {
						if(res.confirm){
							uni.post("/api/team/RemoveTeam", {ID}, msg => {
								if(msg.success) {
									uni.navigateBack({
										
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: msg.msg
									})
								}
							}) 
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group+.cu-form-group {}
</style>
